<!DOCTYPE html>
<html>
<head>
    <title>学生管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
          charset="utf-8"/>

    <!-- jquery -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- bootsrap -->
    <link
            href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet"/>
    <link rel="stylesheet" href="../layer-v3.1.1/layer/css/layui.css"/>
    <script
            src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- bootstrap-table -->
    <link
            href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"
            rel="stylesheet"/>
    <script
            src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <script
            src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

    <!--layer ui-->
    <script type="text/javascript" src="../layer-v3.1.1/layer/layer.js"></script>

    <!-- <link rel="shortcut icon" href="icon/favicon.ico" />  -->

    <script>

        $(document).ready(function () {
            //修ch改密码
            $("#changepw").click(function () {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-lan',
                    area: ['400px', '250px'],
                    shadeClose: true, //点击遮罩关闭
                    title: '修改密码',
                    content: $('#changepwdiv')
                });
                $("#submit").off("click").on("click", function () {
                    $.ajax({
                        type: "PUT",
                        url: "/Admin/updateAdmin",
                        /*dataType:"text",
                        contentType: "application/json",*/
                        data: {
                            "id": $("#adminid").val(),
                            "password": $("#adminpassword").val()
                        },
                        async: true,
                        success: function (result) {
                            layer.alert('修改密码成功', {
                                icon: 6
                            })
                        },
                        error: function (result) {
                            layer.alert('修改密码失败', {
                                icon: 5
                            })
                        }
                    })
                })
            });
            $("#exit").click(function () {
                layer.msg("确认退出本系统?", {
                    time: 0,
                    icon: 7,
                    btn: ["是", "否"],
                    yes: function () {
                        window.location.href = "http://localhost:8080";
                    }
                });
            })


        });

        $(function () {
            var oTable = new TableInit();
            oTable.Init();

            //首页
            $('#home').on('click', function () {
                location.reload();
            });

            //添加
            $('#add').on('click', function () {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-lan',
                    area: ['600px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    title: '添加学生记录',
                    content: $('#bidderDiv')
                });


                $("#dilivery").off("click").on("click", function () {
                    var record = {
                        id: $('#id').val(),
                        name: $('#name').val(),
                        sex: $('#sex').val(),
                        age: $('#age').val()
                    }
                    $.ajax({
                        type: "POST",
                        url: "/Student/insert",
                        datatype: "json",
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(record),
                        async: true,
                        success: function (result) {
                            if(result.code === 666){
                                layer.alert('添加失败', {
                                    icon: 5
                                });
                            }else{
                                layer.alert('添加成功', {
                                    icon: 6
                                });
                            }
                        },
                        error: function (result) {
                            layer.alert('添加失败', {
                                icon: 5
                            });
                        }
                    })
                });
            });

            //查询
            $('#searchByid').on('click', function () {
                layer.prompt({
                    title: '学号查询'
                }, function (val, index) {
                    layer.close(index);
                    $.ajax({
                        type: "get",
                        datatype: "json",
                        url: "/Student/searchById",
                        data: "id=" + val,
                        contentType: "application/x-www-form-urlencoded",
                        async: false,
                        success: function (result) {
                            console.log(result);
                            /*var r = JSON.stringify(result.data);*/
                            layer.alert("学号:" + result.data.id + " 姓名:"
                                + result.data.name + " 性别:"
                                + result.data.sex + " 年龄:"
                                + result.data.age, {
                                title: '查询结果'
                            });
                        },
                        error: function (result) {
                            layer.alert('查找失败', {
                                icon: 5
                            });
                        }
                    });
                });
            })
        });

        var TableInit = function () {
            var oTableInit = new Object();
            oTableInit.Init = function () {
                $('#ArbetTable').bootstrapTable({
                    url: '/Student/showTable',
                    method: 'get',
                    striped: true,
                    cache: false,
                    pagination: true,
                    sortable: false,
                    queryParams: oTableInit.queryParams,
                    showToggle: true,
                    sidePagination: "server",
                    pageList: [4, 10],
                    pageNumber: 1,
                    pageSize: 4,
                    showColunms: true,
                    clickToSelect: true,
                    showRefresh: true,
                    search: false,
                    uniqueId: "id",
                    contentType: "application/x-www-form-urlencoded",
                    columns: [{
                        field: 'id',
                        title: '学号'
                    }, {
                        field: 'name',
                        title: '姓名'
                    }, {
                        field: 'sex',
                        title: '性别'
                    }, {
                        field: 'age',
                        title: '年龄'
                    }, {
                        field: 'operate',
                        title: '操作',
                        events: operateEvents,
                        formatter: operateFormatter
                    }]
                });
            };
            oTableInit.queryParams = function (params) {
                var temp = {
                    limit: params.limit,
                    offset: params.offset
                };
                return temp;
            };
            return oTableInit;
        };

        function operateFormatter(value, row, index) {
            return ['<button class="btn btn-warning" id="edit">编辑</button>',
                '<button class="btn btn-danger" id="delete">删除</button>']
                .join(" ");
        }

        window.operateEvents = {
            "click #delete": function (e, value, row, index) {
                layer.msg("确认删除?", {
                    time: 0,
                    icon: 7,
                    btn: ["是", "否"],
                    yes: function (index) {
                        layer.close(index);
                        $.ajax({
                            type: "DELETE",
                            url: "/Student/deleteById",
                            data: "id=" + row["id"],
                            contentType: "application/x-www-form-urlencoded",
                            async: false,
                            success: function (result) {
                                location.reload();
                            },
                            error: function (result) {
                                layer.alert('删除失败', {
                                    icon: 5
                                });
                            }
                        });

                    }
                });
            },

            "click #edit": function (e, value, row, index) {
                layer.open({
                    type: 1,
                    area: ['600px', '360px'],
                    shadeClose: true, //点击遮罩关闭
                    title: '修改学生记录',
                    content: $('#bidderDiv')
                });

                $("#id").val(row["id"]);
                $("#name").val(row["name"]);
                $("#sex").val(row["sex"]);
                $("#age").val(row["age"]);

                $("#dilivery").off("click").on("click", function () {
                    // var record = {
                    //     oldid: row["id"],
                    //     id: $('#id').val(),
                    //     name: $('#name').val(),
                    //     sex: $('#sex').val(),
                    //     age: $('#age').val()
                    // }
                    //Ajax调用处理
                    $.ajax({
                        type: "PUT",
                        url: "/Student/update",
                        /*datatype: "json",
                        contentType: "application/json",*/
                        data: {
                            "oldid": row["id"],
                            "id": $('#id').val(),
                            "name": $('#name').val(),
                            "sex": $('#sex').val(),
                            "age": $('#age').val()
                        },
                        async: true,
                        success: function (result) {
                            layer.alert('修改成功', {
                                icon: 6
                            });
                        },
                        error: function (result) {
                            layer.alert('修改失败', {
                                icon: 5
                            });
                        }
                    })
                });
            }
        }


        // layui.use('table', function(){
        //     var table = layui.table;
        //     table.render({
        //         elem: '#test'
        //         ,url:'showTable1'
        //         ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        //         ,page: true //开启分页
        //         ,cols: [{
        //             field: 'id',
        //             title: '学号'
        //         }, {
        //             field: 'name',
        //             title: '姓名'
        //         }, {
        //             field: 'sex',
        //             title: '性别'
        //         }, {
        //             field: 'age',
        //             title: '年龄'
        //         }, {
        //             field: 'operate',
        //             title: '操作',
        //             events: operateEvents,
        //             formatter: operateFormatter
        //         }]
        //     });
        // });


    </script>

</head>
<body>

<div id="changepwdiv" style="display: none;">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <td class="text-center" colspan="2"><font color="red"
                                                      size="4">注意：密码不能为空！</font></td>
        </tr>
        <tr>
            <td class="text-center">账号</td>
            <td class="text-center"><input type="text" id="adminid"/></td>
        </tr>
        <tr>
            <td class="text-center">密码</td>
            <td class="text-center"><input type="text" id="adminpassword"/></td>
        </tr>

        <tr>
            <td class="text-center" colspan="2">
                <button id="submit"
                        class="btn btn-primary btn-block">提交
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div id="bidderDiv" style="display: none;">
    <table class="table table-bordered">
        <tbody>
        <tr>
            <td class="text-center" colspan="2"><font color="red"
                                                      size="4">注意：学号不能为空！</font></td>
        </tr>
        <tr>
            <td class="text-center">学号</td>
            <td class="text-center"><input type="text" id="id"/></td>
        </tr>
        <tr>
            <td class="text-center">姓名</td>
            <td class="text-center"><input type="text" id="name"/></td>
        </tr>
        <tr>
            <td class="text-center">性别</td>
            <td class="text-center"><input type="text" id="sex"/></td>
        </tr>
        <tr>
            <td class="text-center">年龄</td>
            <td class="text-center"><input type="text" id="age"/></td>
        </tr>
        <tr>
            <td class="text-center" colspan="2">
                <button id="dilivery"
                        class="btn btn-primary btn-block">提交
                </button>
            </td>
        </tr>
        </tbody>
    </table>

</div>


<div class="container">

    <h1 align="center">学生管理系统</h1>
    <div class="btn-group">
        <button id="home" type="button" class="btn btn-default">首页</button>
        <button id="add" type="button" class="btn btn-default">添加学生记录</button>
        <button id="searchByid" type="button" class="btn btn-default">按学号查找</button>
        <button id="changepw" type="button" class="btn btn-default">修改密码</button>
        <button id="exit" type="button" class="btn btn-default">退出系统</button>
        <button id="searchBysex" type="button" class="btn btn-default">按性别查找</button>
    </div>

    <div id="ccT">
        <table id="ArbetTable">
        </table>
        <table id="test" class="layui-hide">
        </table>
    </div>

</div>
</body>
</html>
